// 所有学生
<template>
  <div class="all">

<div class="wrapper">
      <ul class="top">
        <li class="search-li">
          <el-select style="width: 200px;margin: 0 5px;" v-model="institute" placeholder="所属学院" filterable clearable>
            <el-option v-for="(college, index) in colleges" :key="index" :label="college.name" :value="college.name">
            </el-option>
          </el-select>
        </li>
        <li class="search-li">
          <el-select style="width: 200px;" v-model="clazz" placeholder="班级" filterable clearable>
            <el-option v-for="(clazz, index) in clazzO" :key="index" :label="clazz.name" :value="clazz.name">
            </el-option>
          </el-select>
        </li>
        <li class="search-li">
          <div class="icon"><input type="text" placeholder="学生名" class="search" v-model="key"></div>
        </li>
        <li><el-button type="warning" @click="search()" style="height:40px">搜索</el-button></li>
      </ul>
    </div>

    <el-table :data="pagination.records" border fit>
      <el-table-column fixed="left" prop="studentName" label="姓名" width="180"></el-table-column>
      <el-table-column prop="institute" label="学院" :span="4"></el-table-column>
      <el-table-column prop="major" label="专业" :span="6"></el-table-column>
      <el-table-column prop="grade" label="年级" width="200"></el-table-column>
      <el-table-column prop="clazz" label="班级" width="100"></el-table-column>
      <el-table-column prop="sex" label="性别" width="120"></el-table-column>
      <el-table-column prop="tel" label="联系方式" :span="4"></el-table-column>
      <el-table-column fixed="right" label="查看成绩" width="150">
        <template slot-scope="scope">
          <el-button @click="checkGrade(scope.row.studentId)" type="primary" size="small">查看成绩</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.current"
      :page-sizes="[6, 10]"
      :page-size="pagination.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      class="page"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pagination: {
        //分页后的考试信息
        current: 1, //当前页
        total: null, //记录条数
        size: 6 //每页条数
      },
      colleges: [ // 定义学院数组
          { id: 1, name: '计算机学院' },
          { id: 2, name: '软件工程学院' },
          { id: 3, name: '信息工程学院' },
          { id: 4, name: '电子与通信工程学院' },
          { id: 5, name: '自动化学院' },
        ],
      clazzO: [
        { id: 1, name:'2012'},
        { id: 2, name: '2013'},
        { id: 3, name :'2014'},
        { id: 4, name :'2015'},
        { id: 5, name :'2016'}
      ],
      clazz:'',
      institute:'',
      key:'',
      isNull:''
    };
  },
  created() {
    this.getAnswerInfo();
  },
  methods: {
    getAnswerInfo() {
      //分页查询所有试卷信息
      this.$axios(`/api/students/${this.pagination.current}/${this.pagination.size}`).then(res => {
        this.pagination = res.data.data;
      }).catch(error => {});
    },
    search() {
  this.$axios(`/api/students/1/500`).then(res => {
    let allExam = res.data.data.records;
    let newPage = allExam.filter(item => item.studentName.includes(this.key));

    let rel = this.filterByInstitute(newPage);
    let rel_d = this.filterByClazz(rel);

    console.log(rel_d);

    var startIndex = (this.pagination.current - 1) * this.pagination.size;
    var endIndex = startIndex + this.pagination.size;
    console.log(startIndex)
    console.log(endIndex)
    this.pagination.records = rel_d.slice(startIndex, endIndex);
    this.pagination.total = rel_d.length;
  }).catch(error => {});
},

filterByInstitute(data) {
  if (!this.institute) return data;
  return data.filter(item => item.institute === this.institute);
},

filterByClazz(data) {
  if (!this.clazz) return data;
  return data.filter(item => item.clazz === this.clazz);
},
    //改变当前记录条数
    handleSizeChange(val) {
      this.pagination.size = val;
      this.search();
    },
    //改变当前页码，重新发送请求
    handleCurrentChange(val) {
      this.pagination.current = val;
      this.search();
    },
    checkGrade(studentId) {
  this.score(studentId).then(flag => {
    console.log(flag);
    if (!flag) {
      this.$router.push({ path: "/grade", query: { studentId: studentId } });
    } else {
      this.$message({
        message: "该学生暂未参加考试",
        type: 'error',
        showClose: true
      });
    }
  });
},

score(studentId) {
  return new Promise((resolve, reject) => {
    console.log(studentId);
    this.$axios(`/api/score/${studentId}`).then(res => { //根据学生Id查询成绩
      console.log(res.data);
      if (res.data.code === 200) {
        resolve(false);
      } else {
        resolve(true);
      }
    }).catch(error => {
      reject(error);
    });
  });
}

  }
};
</script>
<style lang="less" scoped>
.all {
  padding: 0px 40px;
  .page {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .edit {
    margin-left: 20px;
  }
  .el-table tr {
    background-color: #dd5862 !important;
  }
}
.el-table .warning-row {
  background: #000 !important;
}

.el-table .success-row {
  background: #dd5862;
}
.wrapper .paper {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .top .el-icon-search {
    position: absolute;
    right: 10px;
    top: 10px;
  }

  .top .icon {
    position: relative;
  }

  .wrapper .top {
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
  }

  .search-li {
    margin-left: 0px;
    /* padding-left: 740px; */
  }

  .top .search-li {
    margin-left: 0px;
  }

  .top {
  
    display: flex;
    justify-content: center;
  }

  .top li {
    display: flex;
    justify-content: space-between;
  }

  .top .search {
    margin-left: 1px;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #eee;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  }

  .top .search:hover {
    color: #0195ff;
    border-color: #0195ff;
  }

  .wrapper .top {
    display: flex;
  }

  .wrapper .top li {
    margin: 20px 10px;
  }
  
    .wrapper .top .order {
    cursor: pointer;
    width: 80px;
  }

  .wrapper .top .order:hover {
    color: #0195ff;
    border-bottom: 2px solid #0195ff;
  }

  .wrapper .top .order:visited {
    color: #0195ff;
  }
</style>
